<template>
<div>




	<li >

		<div v-if="data.id != 0"   @click="getfid(data.id)" :id="data.id" :class="cid==data.id?'bg':''" > {{ data.name }} </div>

		<ul v-if="data.children && data.children.length > 0">
			

			<Reply v-for="child in data.children" :key="child.id" :data="child" />


		</ul>



	</li>







</div>
</template>


<script>

import bus from './bus.js';

export default{

	//声明名称
	name:"Reply",
	props:['data'],
	//声明组件
	components:{
		
	},
	//声明变量
	data(){

		return {

			fid:0,
			cid:0
		}
	},
	//自定义过滤器
	filters:{

			myfilter:function(value){


				value = value.slice(0,3);

				return value + "********";


			}

	},
	//初始化方法
	mounted(){


		this.cid = localStorage.getItem("cateid");
		
	},
	//声明方法
	methods:{


		//点选分类id
		getfid:function(fid){


				this.fid = fid;

				//console.log(this.fid);

				bus.$emit("msg",fid);



				localStorage.setItem("fid",this.fid);

				//取消所有高亮
				var divs = document.getElementsByClassName("bg");

				//遍历选择器
				for (var i = divs.length - 1; i >= 0; i--) {
					
					//取消高亮
					divs[i].classList.remove("bg");

				}

				//首先将当前元素高亮显示
				var mydiv = document.getElementById(fid);
				//动态添加高亮类选择器
				mydiv.classList.add("bg");



		}
		



	}


}
	


</script>


<style>

ul {

	padding-left:10rem;
	list-style:none;

}

.bg{

	background:orange;
	color:white;

}

</style>